<template>
    <div class="server">
        <div class="top">
            <img style='width:1rem;' @click='$router.push("/")' src="../assets/back.png" alt="">
            <div id='search'>
                <img src="../assets/search.png" alt="">
                <input type="text">
            </div>
            <img style='width:1.5rem;' src='../assets/kefu.png' >
        </div>

        <div class="lbt">
            <img src="../assets/bg3.png" alt="">
        </div>

        <div class='select'>
            <div class="option">
                <div class="opt">
                    <img src="../assets/bm1.png" alt="">
                </div>
                <div class="opt">
                    <img src="../assets/bm2.png" alt="">
                </div>
            </div>
            <div class="option">
                <div class="opt">
                    <img src="../assets/bm3.png" alt="">
                </div>
                <div class="opt">
                    <img src="../assets/bm4.png" alt="">
                </div>
            </div>
            <div class="option">
                <div class="opt">
                    <img src="../assets/bm5.png" alt="">
                </div>
                <div class="opt">
                    <img src="../assets/bm6.png" alt="">
                </div>
            </div>
            <div class="option">
                <div class="opt">
                    <img src="../assets/bm7.png" alt="">
                </div>
                <div class="opt">
                    <img src="../assets/bm8.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.server{
  background-color: rgb(248, 248, 248);
  border: 1px solid rgb(248, 248, 248);
}
    .top{
        width: 90%;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1rem;
        padding: 1rem;
        margin: auto;
        }
    .top #search{
        border-radius: 20px;
        position: relative;
        background-color: #eee;
        width: 8rem;
        height: 1.5rem;
        border-radius: 20rem;
        overflow: none;
    }
    .top #search img{
        position: absolute;
        width: 1.2rem;
        top: 10%;
        left: 2%;
       
    }
    .top input{
        width: 70%;
        height: 100%;
        border: none;
        outline: none;
        background: none;
        color: black;
        font-size: 0.8rem;
        text-indent: 5px;
    }
    .lbt{
        width: 88%;
        height: 7rem;
        margin: auto;
        margin-top:0.1rem;
        border-radius: 0.6rem;
        overflow: hidden;
    }
    .lbt img{
        width: 100%;
        height: 100%;
    }
    .select{
        width: 88%;
        margin: auto;
        margin-top: 3.6rem;
        margin-bottom: 3.8rem;
    }
    .option{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .opt{
        width: 48%;
        border-radius: 2rem;
        padding: 0.1rem 0;
    }
    .opt img{
        width: 100%;
        height: 100%;
    }
</style>
<script>
export default {
    name:'server'
}
</script>